/* h1 {
    color: red;
}

p {
    color: blue;
}

.hello {
    color: red;
}

#favorite {
    color: blue;
} 

664d39*/

hr {
    border-top: 1px solid #cbc3a9;
    opacity: 100%;
    margin: 40px 0px;
}

@media(max-width:990px) {
    nav .nav-item {
        border-bottom: 1px solid #cbc3a9;
        margin: auto;
        width: 200px;
    }

    nav .sp_border_none {
        border: none;
        margin-bottom: 30px;
    }
}

@media(min-width:830px) {
    footer .nav-item {
        border-right: 1px solid #664d39;
        padding: 0px 16px;
    }

    footer .pc_border_none {
        border: none;
    }
}

.hina-mincho-regular {
    font-family: "Hina Mincho", serif;
    font-weight: 400;
    font-style: normal;
}

.container {
    max-width: 960px;
}

.text_main_color {
    color: #664d39;
}

.nav-link {
    color: #664d39;
}

.nav-link:hover {
    color: #664d39;
    opacity: 0.15;
    transition: 1s all;
}

.text_link_color {
    color: #c29f52;
}

.text_link_color:hover {
    color: #c29f52;
    opacity: 0.15;
    transition: 1s all;
}

.nav-link,
.text_link_color {
    transition: 1.5s all;
}

.bg_main_color {
    background-color: #ffffff;
}

.bg_nav {
    background-color: #ffffff;
    opacity: 0.85;
}

.text_footer_color {
    color: #cbc3a9;
}

.footer_font_size {
    font-size: 0.8rem;
}

.text_copyright_color {
    color: #ffffff;
}

.bg_copyright_color {
    background-color: #cbc3a9;
}

.ruby_font_size {
    font-size: 0.7rem;
}

/* 小見出しボーダー用のCSS */
.border_haburashi {
    border-bottom: 1.5px solid #cbc3a9;
    padding: 0px 0px 2.4px 0px;
}

.border_haburashi span {
    font-size: 3rem;
    border-bottom: 5px solid #cbc3a9;
    /* border-bottom: 5px solid #cbc3a9; */
}

/* ズームボックス用のCSS */
.zoom_box {
    overflow: hidden;
}

.zoom_box img {
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    -o-transition: 0.5s all;
}

.zoom_box img:hover {
    transform: scale(1.2, 1.2);
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    -o-transition: 0.5s all;
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
}

/* パララックス用のCSS */
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.title_img_parallax {
    overflow: hidden;
    height: 100vh;
    position: relative;
    top: 0;
    text-align: center;
}

.parallax_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    /* object-position: center top; */
}

.title_img_parallax h1 {
    position: absolute;
    z-index: 2;
    bottom: 16%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    writing-mode: vertical-rl;
    letter-spacing: 0.2em;
    margin: 0;
}

.title_img_parallax i {
    position: absolute;
    z-index: 2;
    top: 84%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    font-size: 2rem;
}

.navbar {
    z-index: 3;
}

/* パララックス内スクロールリンクアイコンアニメーション用のCSS */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.blink_icon {
    animation: blink 5s infinite;
}

/* フェードイン用のCSS */
.slide-bottom {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1.8s 0s ease-out;
}

/* ローディングアニメーション用のCSS */
.loading {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    background: #ffffff;
    z-index: 9999;
}

.animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #cbc3a9;
}

.animation,
.animation:before,
.animation:after {
    width: 1em;
    height: 4em;
    background: #cbc3a9;
    animation: load 1s infinite ease-in-out;
}

.animation:before,
.animation:after {
    position: absolute;
    top: 0;
    content: '';
}

.animation {
    animation-delay: -0.16s;
}

.animation:before {
    left: -1.5em;
    animation-delay: -0.32s;
}

.animation:after {
    left: 1.5em;
}

@keyframes load {

    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em;
    }

    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}

/* ボタン色カスタム用のCSS */
.btn_custom {
    background-color: #c29f52;
    color: #ffffff;
}

/* ボタン角カスタム用のCSS */
.btn_circle {
    border-radius: 0%;
}

/* ボタン色カスタム用（青森県神輿連合会）のCSS */
.btn_custom_association {
    background-color: #14321a;
    color: #ffffff;
}

.text_association_color {
    color: #14321a;
}

/* ハンバーガーメニューのスタイリング */
.navbar-toggler {
    border-color: rgba(0, 0, 0, 0);

    &:focus {
        box-shadow: none !important;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(102,77,57,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }
}

.card {
    border-color: #cbc3a9;
}